<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新练习+复习</title>
    <style>
        .pink {
            color: pink; 
            font-family: 楷体;
        }
        .brown {
            color:brown;
            font-family: 楷体;
        }
        .peru {
            color: peru;
        }
        .red{
            /* 行高属性值和盒子高度属性值相同时，文字垂直居中 */
            line-height: 100px;

            width: 200px;
            height: 100px;
            background-color: brown;
        }
        .orange{
            width: 500px;
            height: 500px;
            background-color: orange;
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <div class="red"> 文字垂直居中效果：div1 </div>
    <hr>
    <div class="orange">
        <form>
            <br>
            <label>文本框:</label><input type="text">
            <br><br>
            <label>密码框:</label><input type="password" placeholder="请输入密码">
            <br><br>
            <label>单选框:</label>
            <br><br>
            <label><input type="radio" name="gender">男</label>
            <label><input type="radio" name="gender" checked>女</label>
            <br><br>
            <label>复选框:</label>
            <label ><input type="checkbox">唱歌</label>
            <label ><input type="checkbox">绘画</label>
            <label ><input type="checkbox" checked>写代码</label>
            <br><br>
            <label>上传多个文件：</label>
            <label ><input type="file" multiple></label>
            <br><br>
            <label>下拉菜单：</label>
            <select>
                <option>城市</option>
                <option selected>生活</option>
                <option>兴趣</option>
                <option>美食</option>
            </select>
            <br><br>
            <label>文本框:</label><input type="text" placeholder="请输入文本">
            <br><br>
            <label >文本域：</label><textarea></textarea>
            <br><br>
            <label>按钮：</label>
            <button type="submit" class="pink">提交按钮</button>
            <button type="reset" class="brown">重置按钮</button>
            <button type="button" style="font-family: 楷体;">普通按钮</button>
        </form>
    </div>
    <hr>
    <label>图片：</label><br>
    <img src="../picture/dog.png" alt="这是一只小狗" title="小狗狗" height="120">
    <br>
    <label>音频：</label><br>
    <audio src="../Music/M500002TICkB2FNM8c.mp3" controls></audio>
    <br>
    <label>视频：静音自动播放</label><br>
    <video src="../video/31485004889-1-192.mp4" controls></video>
    <hr>
    <label>表格：</label><br>
    <table border="2">
        <thead>
            <tr>
            <th>表头单元格</th>
            <th>表头单元格</th>
            <th>表头单元格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
            <th>内容</th>
            <th>内容</th>
            <th>内容</th>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总结</th>
                <th>总结</th>
                <th>总结</th>
            </tr>
        </tfoot>
    </table>
    <br><br>
    <label>无序列表：</label>

    <ul>
        <li>条目1</li>
        <li>条目2</li>
        <li>条目3</li>
    </ul>
    <br>
    <label>有序列表</label>
    <br>
    <ol>
        <li>步骤1</li>
        <li>步骤2</li>
        <li>步骤3</li>
    </ol>
    <label>定义列表</label>
    <br>
    <dl>
        <dt>标题</dt>
        <dt>标题</dt>
        <dt>描述</dt>
        <dt>描述</dt>
    </dl>

</body>
</html>